<template>
  <view class="mine-page">
    <!-- 顶部头部 -->
    <view class="page-header">
      <view class="header-inner">
        <text class="header-title">我的</text>
        <view class="header-actions">
          <view class="action-btn" @click="handleMessages">
            <u-icon name="bell" color="#1f2937" size="18"></u-icon>
            <view class="badge-dot"></view>
          </view>
          <view class="action-btn" @click="handleSettings">
            <u-icon name="setting" color="#1f2937" size="18"></u-icon>
          </view>
        </view>
      </view>

      <!-- 个人信息卡片 -->
      <view class="user-card">
        <view class="user-info-wrap">
          <view class="avatar-wrap" @click="handleAvatarClick">
            <image 
              :src="userInfo.avatar || '/static/images/profile.jpg'" 
              mode="aspectFill" 
              class="avatar-image"
            ></image>
            <view class="camera-icon">
              <u-icon name="camera" color="#ffffff" size="10"></u-icon>
            </view>
          </view>
          <view class="user-info">
            <text class="user-name">{{ userInfo.name || '未登录' }}</text>
            <text class="user-desc">{{ userInfo.name ? '认证用户' : '完善资料获取更多服务' }}</text>
            <view v-if="!userInfo.name" class="login-btn" @click="handleLogin">
              <text class="login-text">立即登录</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="content-scroll">
      <!-- 数据统计卡片 -->
      <view class="stats-card">
        <view class="stats-grid">
          <view class="stat-item" @click="handleMyServices">
            <text class="stat-value">{{ userStats.services }}</text>
            <text class="stat-label">我发布的服务</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item" @click="handleMyDemands">
            <text class="stat-value">{{ userStats.demands }}</text>
            <text class="stat-label">我发布的需求</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item" @click="handleMyFavorites">
            <text class="stat-value">{{ userStats.favorites }}</text>
            <text class="stat-label">我的收藏</text>
          </view>
        </view>
      </view>

      <!-- 账户与安全 -->
      <view class="section">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">账户与安全</text>
        </view>
        <view class="menu-card">
          <view class="menu-item" @click="handleProfile">
            <view class="item-left">
              <view class="item-icon bg-primary">
                <u-icon name="account" color="#10b981" size="18"></u-icon>
              </view>
              <view class="item-info">
                <text class="item-title">个人资料</text>
                <text class="item-desc">完善资料获取更多服务</text>
              </view>
            </view>
            <u-icon name="arrow-right" color="#d1d5db" size="14"></u-icon>
          </view>

          <view class="menu-divider"></view>

          <view class="menu-item" @click="handleMerchantAuth">
            <view class="item-left">
              <view class="item-icon bg-primary">
                <u-icon name="bag" color="#10b981" size="18"></u-icon>
              </view>
              <view class="item-info">
                <text class="item-title">商户认证</text>
                <text class="item-desc">{{ merchantAuthStatus }}</text>
              </view>
            </view>
            <view class="item-right">
              <view :class="['auth-badge', merchantAuthClass]">
                <text class="badge-text">{{ merchantAuthText }}</text>
              </view>
              <u-icon name="arrow-right" color="#d1d5db" size="14"></u-icon>
            </view>
          </view>

          <view class="menu-divider"></view>

          <view class="menu-item" @click="handleSecurity">
            <view class="item-left">
              <view class="item-icon bg-primary">
                <u-icon name="lock" color="#10b981" size="18"></u-icon>
              </view>
              <view class="item-info">
                <text class="item-title">账号安全</text>
                <text class="item-desc">修改密码、绑定手机等</text>
              </view>
            </view>
            <u-icon name="arrow-right" color="#d1d5db" size="14"></u-icon>
          </view>
        </view>
      </view>

      <!-- 帮助中心 -->
      <view class="section">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">帮助中心</text>
        </view>
        <view class="menu-card">
          <view class="menu-item" @click="handleHelp">
            <view class="item-simple">
              <u-icon name="question-circle" color="#3b82f6" size="20"></u-icon>
              <text class="simple-text">使用帮助</text>
            </view>
            <u-icon name="arrow-right" color="#d1d5db" size="14"></u-icon>
          </view>

          <view class="menu-divider"></view>

          <view class="menu-item" @click="handleContact">
            <view class="item-simple">
              <u-icon name="phone" color="#3b82f6" size="20"></u-icon>
              <text class="simple-text">联系客服</text>
            </view>
            <u-icon name="arrow-right" color="#d1d5db" size="14"></u-icon>
          </view>

          <view class="menu-divider"></view>

          <view class="menu-item" @click="handleAbout">
            <view class="item-simple">
              <u-icon name="info-circle" color="#3b82f6" size="20"></u-icon>
              <text class="simple-text">关于我们</text>
            </view>
            <u-icon name="arrow-right" color="#d1d5db" size="14"></u-icon>
          </view>
        </view>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>
    
    <!-- 底部导航栏 -->
    <TabBar :current="4" />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import TabBar from '@/components/yjyny/TabBar.vue'

const store = useStore()

// 用户信息
const userInfo = ref({
  name: '',
  avatar: '',
  phone: ''
})

// 用户统计
const userStats = ref({
  services: 0,
  demands: 0,
  favorites: 0
})

// 商户认证状态
const merchantAuthStatus = ref('未认证')
const merchantAuthText = computed(() => {
  return merchantAuthStatus.value === '已认证' ? '已认证' : '未认证'
})
const merchantAuthClass = computed(() => {
  return merchantAuthStatus.value === '已认证' ? 'auth-verified' : 'auth-unverified'
})

// 事件处理
const handleMessages = () => {
  uni.navigateTo({ url: '/pages/yjyny/messages/index' })
}

const handleSettings = () => {
  uni.navigateTo({ url: '/pages/yjyny/mine/settings' })
}

const handleAvatarClick = () => {
  if (!userInfo.value.name) {
    handleLogin()
    return
  }
  
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // TODO: 上传头像
      userInfo.value.avatar = res.tempFilePaths[0]
      uni.showToast({
        title: '头像已更新',
        icon: 'success'
      })
    }
  })
}

const handleLogin = () => {
  uni.navigateTo({ url: '/pages/login' })
}

const handleMyServices = () => {
  if (!checkLogin()) return
  uni.navigateTo({ url: '/pages/yjyny/mine/posts?type=service' })
}

const handleMyDemands = () => {
  if (!checkLogin()) return
  uni.navigateTo({ url: '/pages/yjyny/mine/posts?type=demand' })
}

const handleMyFavorites = () => {
  if (!checkLogin()) return
  uni.navigateTo({ url: '/pages/yjyny/mine/favorites' })
}

const handleProfile = () => {
  if (!checkLogin()) return
  uni.navigateTo({ url: '/pages/yjyny/mine/profile' })
}

const handleMerchantAuth = () => {
  if (!checkLogin()) return
  uni.showToast({
    title: '商户认证功能开发中',
    icon: 'none'
  })
}

const handleSecurity = () => {
  if (!checkLogin()) return
  uni.navigateTo({ url: '/pages/yjyny/mine/security' })
}

const handleHelp = () => {
  uni.showToast({
    title: '帮助文档开发中',
    icon: 'none'
  })
}

const handleContact = () => {
  uni.showModal({
    title: '联系客服',
    content: '客服电话：400-123-4567\n工作时间：09:00-18:00',
    showCancel: false
  })
}

const handleAbout = () => {
  uni.navigateTo({ url: '/pages/yjyny/platform-intro/index' })
}

const checkLogin = () => {
  if (!userInfo.value.name) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      success: (res) => {
        if (res.confirm) {
          handleLogin()
        }
      }
    })
    return false
  }
  return true
}
</script>

<style lang="scss" scoped>
.mine-page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f8fafc, #f1f5f9, #f9fafb);
}

// 页面头部
.page-header {
  background-color: #ffffff;
  border-bottom: 2rpx solid #f3f4f6;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.action-btn {
  position: relative;
  width: 72rpx;
  height: 72rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.action-btn:active {
  background-color: #f3f4f6;
}

.badge-dot {
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  width: 16rpx;
  height: 16rpx;
  background-color: #ef4444;
  border-radius: 50%;
}

// 个人信息卡片
.user-card {
  padding: 0 32rpx 32rpx;
}

.user-info-wrap {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  border: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 32rpx;
}

.avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.avatar-image {
  width: 128rpx;
  height: 128rpx;
  border-radius: 32rpx;
  background-color: #f3f4f6;
}

.camera-icon {
  position: absolute;
  bottom: -8rpx;
  right: -8rpx;
  width: 48rpx;
  height: 48rpx;
  background-color: #10b981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.3);
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.user-desc {
  font-size: 24rpx;
  color: #6b7280;
  margin-bottom: 16rpx;
}

.login-btn {
  padding: 12rpx 32rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.2);
  align-self: flex-start;
}

.login-text {
  font-size: 24rpx;
  font-weight: 500;
  color: #ffffff;
}

// 内容滚动区
.content-scroll {
  height: calc(100vh - 400rpx);
}

// 数据统计卡片
.stats-card {
  padding: 32rpx;
}

.stats-grid {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  border: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  display: grid;
  grid-template-columns: 1fr 2rpx 1fr 2rpx 1fr;
  align-items: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 0;
  transition: background-color 0.3s;
  border-radius: 16rpx;
}

.stat-item:active {
  background-color: rgba(16, 185, 129, 0.05);
}

.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #10b981;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #6b7280;
}

.stat-divider {
  width: 2rpx;
  height: 80rpx;
  background-color: #f3f4f6;
}

// 区块
.section {
  padding: 0 32rpx 32rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.title-bar {
  width: 8rpx;
  height: 32rpx;
  background-color: #10b981;
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

// 菜单卡片
.menu-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  border: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  transition: background-color 0.3s;
}

.menu-item:active {
  background-color: rgba(16, 185, 129, 0.05);
}

.item-left {
  display: flex;
  align-items: center;
  gap: 24rpx;
  flex: 1;
}

.item-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  &.bg-primary {
    background-color: rgba(16, 185, 129, 0.1);
  }
}

.item-info {
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1f2937;
}

.item-desc {
  font-size: 24rpx;
  color: #6b7280;
  margin-top: 4rpx;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.auth-badge {
  padding: 8rpx 16rpx;
  border-radius: 24rpx;
  font-size: 22rpx;
  
  &.auth-verified {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
  }
  
  &.auth-unverified {
    background-color: #f3f4f6;
    color: #6b7280;
  }
}

.badge-text {
  font-size: 22rpx;
}

.item-simple {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.simple-text {
  font-size: 28rpx;
  color: #1f2937;
}

.menu-divider {
  height: 2rpx;
  background-color: #f3f4f6;
}

// 底部安全区
.safe-bottom {
  height: 160rpx;
}
</style>
